<template>
	<view class="content">
		<view class="content_navbar">
			<u-navbar title="面试邀请"></u-navbar>
			<view class="u-flex u-row-between u-p-30 u-border-bottom">
				<view class="u-font-40 u-font-weight">
					线下
				</view>
				<view class="u-flex">
					<view v-if="data.utype == 1" class="content_tag u-flex" @click="data.isJob = true">
						<view class=" u-line-1" style="width: 100rpx;">
							{{data.job_text || '职位'}}
						</view>
						<u-icon name="arrow-down-fill" size="28" color="#BBBBBB "></u-icon>
					</view>
					<view v-if="data.utype == 2" class="content_tag" @click="data.isStatus = true">
						{{data.is_look_text || '状态'}}
						<u-icon name="arrow-down-fill" size="28" color="#BBBBBB "></u-icon>
					</view>
					<view class="content_tag" @click="data.isDateTime = true">
						{{data.settr_text || '时间'}}
						<u-icon name="arrow-down-fill" size="28" color="#BBBBBB "></u-icon>
					</view>
				</view>
			</view>
		</view>

		<z-paging ref="paging" :fixed="false" :height="height" v-model="dataList" @query="queryList">
			<view class="content_item" v-for="item in dataList" :key="item.id" @click="toDetail(item)">
				<view class="content_item_lf">
					<view>
						{{$u.timeFormat(item.interview_time,'mm-dd')}}
					</view>
					<view class="u-m-t-20">
						{{$u.timeFormat(item.interview_time,'hh:MM')}}
					</view>
					<view class="content_item_lf--overtime" v-if="item.overtime">
						<u-image src="/pages/pagesMessage/static/overtime.png" width="100" height="62"></u-image>
					</view>
				</view>
				<view class="content_item_rt">
					<view class="u-flex u-row-between">
						<view class="u-font-weight u-line-1 u-white-40">
							{{item.jobname}}
						</view>
						<view style="color: #ff3a05;">
							{{item.is_look == 1 ?'已查看' : '未查看'}}
						</view>
					</view>
					<view class="u-m-t-14">
						<text>{{item.education_text}}</text>
						<text class="u-m-l-10 u-m-r-10">|</text>
						<text>{{item.experience_text}}</text>
						<text class="u-m-l-10 u-m-r-10" v-if="item.experience_text">|</text>
						<text v-if="data.utype == 1">{{item.education_text}}</text>
						<text v-if="data.utype == 2">{{item.nature_text}}</text>
					</view>
					<view class="u-m-t-14" v-if="data.utype == 1">
						<text>
							面试 {{item.jobname}}
						</text>
					</view>
					<view class="u-m-t-14" v-if="data.utype == 2">
						<text>{{item.companyname}}</text>
					</view>
				</view>
			</view>
		</z-paging>
		<!-- 职位弹窗 -->
		<u-select v-model="data.isJob" :list="data.jobList" @confirm="jobConfirm"></u-select>
		<!-- 状态弹窗 -->
		<u-select v-model="data.isStatus" :list="data.statusList" @confirm="statusConfirm"></u-select>
		<!-- 时间弹窗 -->
		<u-select v-model="data.isDateTime" :list="data.deteTimeList" @confirm="dateTimeConfirm"></u-select>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue"
	import {
		onReady
	} from '@dcloudio/uni-app'
	const height = ref('')
	const data = reactive({
		utype: uni.getStorageSync('utype'),
		is_look: '',
		is_look_text: '',
		isStatus: false,
		statusList: [{
			value: '',
			label: '全部'
		}, {
			value: 1,
			label: '已查看'
		}, {
			value: 0,
			label: '未查看'
		}],
		settr: '',
		settr_text: '',
		isDateTime: false,
		deteTimeList: [{
			value: 0,
			label: '不限'
		}, {
			value: 3,
			label: '3天内'
		}, {
			value: 7,
			label: '7天内'
		}, {
			value: 15,
			label: '15天内'
		}, {
			value: 30,
			label: '30天内'
		}],
		isJob: false,
		jobList: [],
		job: '',
		job_text: ''
	})
	const paging = ref(null)
	let dataList = ref([])
	onReady(() => {
		getListHeight()
	})
	// 职位搜索
	const jobConfirm = async (e) => {
		data.job = e[0].value
		data.job_text = e[0].label
		paging.value.reload()
	}
	// 时间搜索
	const dateTimeConfirm = async (e) => {
		data.settr = e[0].value
		data.settr_text = e[0].label
		paging.value.reload()
	}
	// 状态搜索
	const statusConfirm = async (e) => {
		data.is_look = e[0].value
		data.is_look_text = e[0].label
		paging.value.reload()
	}
	// 获取列表展示高度
	const getListHeight = async () => {
		let res = await uni.$u.getRect('.content_navbar');
		if (res) {
			height.value = (uni.$u.sys().windowHeight - res.height) + 'px'
		}
	}
	// 去详情页
	const toDetail = (item) => {
		uni.$u.route('pages/pagesMessage/interview/detail', {
			item: JSON.stringify(item)
		})
	}
	// 获取面试邀请列表
	const queryList = async (pageNo, pageSize) => {
		let params = {
			page: pageNo,
			pagesize: pageSize,
			is_look: data.is_look,
			jobid: data.job,
			settr: data.settr
		}
		let res
		if (data.utype == 1) {
			res = await uni.$u.api.company_interview_list({
				params
			})
			data.jobList = res.option_jobs.map(item => {
				return {
					value: item.id,
					label: item.jobname
				}
			})
			data.jobList.unshift({
				value: '',
				label: '全部'
			})
		} else {
			res = await uni.$u.api.getInterviewList({
				params
			})
		}
		paging.value.complete(res.items)
	}
</script>
<style scoped lang="scss">
	.content {
		color: #101010;

		&_tag {
			color: #867f7f;
			font-size: 32rpx;
			background-color: #efefef;
			border-radius: 10rpx;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			margin-left: 40rpx;
			padding: 0 30rpx;
		}


		&_item {
			margin: 42rpx;
			display: flex;

			&_lf {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 36rpx;
				position: relative;

				&--overtime {
					position: absolute;

				}
			}

			&_rt {
				background-color: #eeeeee;
				flex: 1;
				padding: 22rpx 32rpx;
				font-size: 28rpx;
				margin-left: 48rpx;

				text {
					color: #565656;
				}
			}
		}
	}
</style>